@import '../global/variables.css';

:root,
:host {
  --ring-tooltip-background-color: var(--ring-content-background-color);
  --ring-tooltip-text-color: var(--ring-text-color);
}

:global(.ring-ui-theme-dark) {
  --ring-tooltip-background-color: var(--ring-grey-container-light-color);
  --ring-tooltip-text-color: var(--ring-white-text-color);
}

.tooltip {
  max-width: calc(var(--ring-unit) * 50);
  padding: 6px var(--ring-unit);

  text-align: left;

  color: var(--ring-tooltip-text-color);
  border-color: var(--ring-line-color);
  background-color: var(--ring-tooltip-background-color);
  box-shadow: 0 2px 8px var(--ring-popup-shadow-color);
}

.inheritedTheme {
  color: var(--ring-text-color);
  background-color: var(--ring-content-background-color);
  box-shadow: var(--ring-popup-shadow);
}

.long {
  font-size: var(--ring-font-size-smaller);
  line-height: var(--ring-line-height-lowest);
}
